import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import UI from 'beta/store/ui';
import { IContext } from 'beta/typings/context';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import {
  Contract,
  ContractStatus,
  FiberService,
  useContractsQuery,
  useGetTerminationsQuery,
  useServiceQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import CompleteFlutningur from './containers/CompleteFlutningur';

type SkrefProps = {
  customerId: string;
  serviceId: string;
  ui: UI;
};

const Flutningur = ({ customerId, serviceId, ui }: SkrefProps) => {
  const router = useRouter();
  const { data, error, loading } = useServiceQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });

  const { data: contractData, loading: loadingContract } = useContractsQuery({
    variables: {
      input: {
        serviceId: serviceId,
        customerId,
      },
    },
  });

  const type = data?.service.__typename;
  const COLOR = ui?.serviceColor ?? 'purple';
  const { t } = useTranslation('flutningur');
  const currentContract = contractData?.contracts.contracts.find(
    (c) => c.status == ContractStatus.Active || c.status == ContractStatus.Pending,
  );
  const currentService = data?.service;

  const { data: terminationsData } = useGetTerminationsQuery({
    variables: {
      input: { serviceId },
    },
  });

  const termination = terminationsData?.terminations?.find(
    (termination) => !termination.isProcessed && !termination.isCancelled,
  );
  const hasTermination = !!termination;

  if (loading || loadingContract) {
    return (
      <Box>
        <Text>{t('loading')}</Text>
      </Box>
    );
  }

  if (!currentService || type !== 'FiberService' || error || !currentContract) {
    return (
      <Box>
        <Text>{t('errors.notFiber')}</Text>
      </Box>
    );
  }

  if (hasTermination) {
    return (
      <Box>
        <Text>{t('errors.hasTermination')}</Text>
      </Box>
    );
  }

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/thjonustur/${serviceId}`}
      title={t('sideMenu.title')}
      subTitle={data?.service?.name ?? t('sideMenu.subTitle')}
      icon="internet"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('sideMenu.textBeforeClickable')}
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/netid/ljosleidari/spurningar" target="__blank">
              {t('sideMenu.clickable')}
            </a>
          </Text>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('sideMenu.textAfterClickable')}
          </Text>
        </Box>
      }
    >
      <CompleteFlutningur
        color={COLOR}
        service={currentService as FiberService}
        contract={currentContract as Contract}
      />
    </StepWrapper>
  );
};

Flutningur.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    serviceId: query.serviceId,
    namespacesRequired: ['flutningur'],
  };
};

export default inject('steps', 'ui')(observer(Flutningur));